<template>
	<view :style="Theme">
		<uni-nav-bar :statusBar="true" :fixed="true" title="技术转移" />

		<view class="container">
			<!-- 技术图谱 -->
			<view class="section">
				<view class="section-title">
					<text class="iconfont">&#xe60a;</text>
					技术图谱
				</view>
				<view class="tab-bar">
					<view :class="['tab', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">
						<text class="iconfont">&#xe64c;</text> 人工智能
					</view>
					<view :class="['tab', activeTab === 1 ? 'active' : '']" @click="activeTab = 1">
						<text class="iconfont">&#xe64c;</text> 半导体技术
					</view>
				</view>
				
			</view>
			<!-- 案例时间轴 -->
			<view class="section">
				<view class="section-title">
					<text class="iconfont">&#xe60a;</text>
					案例时间轴
				</view>
				<view v-for="item in caseList" :key="item.id" class="case-card">
					<view class="case-header">
						<text class="star">★</text>
						<text>{{ item.title }}</text>
						<text class="tag">{{ item.tag }}</text>
						<text class="date">{{ item.date }}</text>
					</view>
					<video v-if="item.videoUrl" id="myVideo" :src="item.videoUrl" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
					<view class="uploader">上传人：{{ item.uploader }}</view>
				</view>
			</view>
			<!-- 案例时间轴 -->
			<view class="section">
				<view class="section-title">
					<text class="iconfont">&#xe60a;</text>
					案例时间轴
				</view>
				<view v-for="item in caseList" :key="item.id" class="case-card">
					<view class="case-header">
						<text class="star">★</text>
						<text>{{ item.title }}</text>
						<text class="tag">{{ item.tag }}</text>
						<text class="date">{{ item.date }}</text>
					</view>
					<video v-if="item.videoUrl" id="myVideo" :src="item.videoUrl" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
					<view class="uploader">上传人：{{ item.uploader }}</view>
				</view>
			</view>
		</view>
		<view class="dibukong"></view>
		<view class="dibu">
			<button class="upload-btn">上传技术案例</button>
			<button class="publish-btn">发布技术需求</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				caseList: [{
						id: 1,
						title: '生物传感器技术',
						tag: '半导体技术',
						date: '2025-01-01',
						uploader: '半导体技术',
						img: '',
					},
					{
						id: 2,
						title: '广告投放优化算法',
						tag: '人工智能',
						date: '2025-01-01',
						uploader: '人工智能',
						img: '/static/demo.png',
						videoUrl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
					},
					{
						id: 3,
						title: '生物传感器技术',
						tag: '半导体技术',
						date: '2025-01-01',
						uploader: '半导体技术',
						img: '',
					},
					{
						id: 4,
						title: '广告投放优化算法',
						tag: '人工智能',
						date: '2025-01-01',
						uploader: '人工智能',
						img: '/static/demo.png',
						videoUrl:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
					},
				]
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		padding-bottom: 0;
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.tab-bar {
		display: flex;
		margin-bottom: 20rpx;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 16rpx;
		border-radius: 16rpx;
		background: #f0f4fa;
		margin-right: 16rpx;
	}

	.tab.active {
		background: #e6f7ff;
		color: #1890ff;
	}

	.upload-btn {
		width: 100%;
		background: #1abc6c;
		color: #fff;
		margin-bottom: 16rpx;
		font-size: 30rpx;
	}

	.publish-btn {
		width: 100%;
		background: #ffa940;
		color: #fff;
		font-size: 30rpx;
	}

	.case-card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #eee;
		margin-bottom: 24rpx;
		padding: 20rpx;
	}

	.case-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.star {
		color: #fadb14;
		margin-right: 8rpx;
	}

	.tag {
		background: #e6f7ff;
		color: #1890ff;
		border-radius: 8rpx;
		padding: 2rpx 8rpx;
		margin-left: 8rpx;
		font-size: 20rpx;
	}

	.date {
		margin-left: auto;
		color: #888;
		font-size: 20rpx;
	}

	.case-img {
		width: 100%;
		height: 160rpx;
		background: #eee;
		margin-bottom: 12rpx;
	}

	.uploader {
		color: #888;
		font-size: 22rpx;
	}
	#myVideo{
		width: 100%;
		height: 200rpx;
	}
	.dibu{
		width: 100%;
		height: 240rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding:30rpx 20rpx;
		box-sizing: border-box;
	}
	.dibukong{
		width: 100%;
		height: 200rpx;
	}
</style>